<template>
  <div>
    <van-tabs v-model:active="active" scrollspy sticky>
      <!--  导航左侧,返回按钮  -->
      <template #nav-left>
        <van-button icon="arrow-left" style="border: 0" @click="goback"/>
      </template>

      <!-- 内容导航 -->
      <van-tab title="商品">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(pic,index) in bannerArr" :key="index">
            <van-image :src="pic"/>
          </van-swipe-item>
        </van-swipe>
        <!-- 商品价格 -->
        <van-row>
          <p class="price"><span class="start">￥</span>1499 <span class="old">￥2549</span></p>
        </van-row>
        <!--优惠券信息-->
        <van-row>
          <div class="coupon">
            <div class="message">预计得210米金</div>
            <van-button color="#ff6700" size="mini">查看</van-button>
          </div>
        </van-row>
        <var-row>
          <div class="product-name">Redmi Note 10 Pro</div>
          <div class="product-des">「8+256GB移动权益版优惠300元，领券再减50元；信用卡分期支付享优惠」</div>
          <ol class="sale-point">
            <li>【旗舰性能】天玑1100+VC液冷散热</li>
            <li>【旗舰性能】天玑1100+VC液冷散热</li>
            <li>【旗舰性能】天玑1100+VC液冷散热</li>
          </ol>
        </var-row>
        <van-divider/>
        <var-row>
          <van-swipe :loop="false" :show-indicators="false" :width="90">
            <van-swipe-item v-for="(item,index) in paramItemArr" :key="index">
              <div class="param-item">
                <div class="van-ellipsis">
                  <van-image
                      :src="item.url"
                      width="15"></van-image>
                </div>
                <div class="van-ellipsis">{{ item.name }}</div>
                <div class="van-ellipsis">{{ item.value }}</div>
              </div>
            </van-swipe-item>
          </van-swipe>
        </var-row>
        <van-divider/>
        <!-- 排行榜 -->
        <van-cell is-link to="/" style="background-color: rgba(255,157,86,0.16)">
          <template #title>
            <van-image height="18" style="vertical-align: middle"
                       src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/049ec9bcc093365914620c46965bf9ab.png"></van-image>
            <span style="font-size: 14px;line-height: 14px;margin-left: 10px">【手机直降热销榜】第1名</span>
          </template>
        </van-cell>
        <!-- 已选商品 -->
        <van-cell is-link @click="productPopupShow=true">
          <template #title>
            <div style="float: left;margin-right: 20px">已选</div>
            <div class="van-ellipsis">Redmi K50 电竞版 8GB+128GB 银翼 <span>x1</span></div>
          </template>
        </van-cell>
        <!--选择商品弹窗-->
        <van-popup
            v-model:show="productPopupShow"
            round
            closeable
            position="bottom"
            :style="{ height: '45%'}"
        >
          <div style="margin: 20px ; font-size: 12px">
            <van-row :gutter="30">
              <van-col :span="6" style="background-color: #f2f2f2">
                <van-image
                    src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/8ec65803d049f8d68b6a092fb051590a.png"></van-image>
              </van-col>
              <van-col :span="18">
                <div class="product-desc">
                  <p class="price">￥2399 <span class="old">￥2549</span></p>
                  <div class="van-ellipsis name">Redmi K50 电竞版 8GB+128GB 银翼</div>
                </div>
              </van-col>
            </van-row>

            <van-row>
              <!--版本选择-->
              <p style="font-size: 14px"><b>版本</b></p>
              <van-radio-group v-model="productChoose.version" direction="horizontal">
                <van-radio icon-size="15px" checked-color="#ff6700" name="1">8GB+128GB</van-radio>
                <van-radio icon-size="15px" checked-color="#ff6700" name="2">12GB+128GB</van-radio>
                <van-radio icon-size="15px" checked-color="#ff6700" name="3">12GB+256GB</van-radio>
              </van-radio-group>
              <!--颜色选择-->
              <p style="font-size: 14px"><b>颜色</b></p>
              <van-radio-group v-model="productChoose.color" direction="horizontal">
                <van-radio icon-size="15px" checked-color="#ff6700" name="1">银翼</van-radio>
                <van-radio icon-size="15px" checked-color="#ff6700" name="2">暗影</van-radio>
                <van-radio icon-size="15px" checked-color="#ff6700" name="3">冰斩</van-radio>
              </van-radio-group>
              <!--购买数量-->
              <van-row style="margin-top: 10px">
                <van-col :span="12"><p style="margin:0; font-size: 14px; line-height: 28px"><b>购买数量</b></p></van-col>
                <van-col :span="12" style="text-align: right;">
                  <van-stepper v-model="productChoose.count"/>
                </van-col>
              </van-row>

              <!-- 提交按钮-->
              <van-row :gutter="30" style="margin-top: 20px">
                <van-col :span="12">
                  <van-button round color="#ff6700" size="small" style="width: 100%">加入购物车</van-button>
                </van-col>
                <van-col :span="12">
                  <van-button round color="#ff6700" size="small" style="width: 100%">立即购买</van-button>
                </van-col>
              </van-row>
            </van-row>
            <!-- 提交按钮结束-->
          </div>
        </van-popup>
        <!--选择商品弹窗结束-->
        <!--选择地址-->
        <van-cell is-link @click="addressPopupShow=true">
          <template #title>
            <div style="float: left;margin-right: 20px">送至</div>
            <div class="van-ellipsis">
              <van-icon name="location-o"/>
              广东省 中山市
            </div>
          </template>
        </van-cell>
        <van-popup
            v-model:show="addressPopupShow"
            round
            closeable
            position="bottom"
            :style="{ height: '45%'}"
        >
          <div style="margin: 20px 10px 20px 10px" class="van-safe-area-bottom">
            <van-address-list
                v-model="chosenAddressId"
                :list="addressList"
                @add="onAdd"
                @edit="onEdit"
            />
          </div>
        </van-popup>
        <!--选择地址结束-->
        <van-cell is-link @click="sectionPopupShow=true">
          <!-- 使用 title 插槽来自定义标题 -->
          <template #title>
            <span class="custom-title"><van-icon name="certificate"/>小米自营</span>
            <span class="custom-title"><van-icon name="certificate"/>小米发货</span>
            <span class="custom-title"><van-icon name="certificate"/>七天无理由退换</span>
          </template>
        </van-cell>
        <van-popup
            v-model:show="sectionPopupShow"
            round
            closeable
            position="bottom"
            :style="{ height: '45%'}"
        >

          <div style="margin: 20px">
            <p style="text-align: center">服务说明</p>

            <div class="section">
              <p class="section-title">
                <van-icon name="checked" color="#ff6700"/>
                <span style="margin-left: 10px">小米自营</span>
              </p>
            </div>

            <div class="section">
              <p class="section-title">
                <van-icon name="checked" color="#ff6700"/>
                <span style="margin-left: 10px">小米发货</span>
              </p>
              <div class="section-info">由小米发货</div>
            </div>

            <div class="section">
              <p class="section-title">
                <van-icon name="checked" color="#ff6700"/>
                <span style="margin-left: 10px">7天无理由退换</span>
              </p>
            </div>
            <div class="section">
              <p class="section-title">
                <van-icon name="checked" color="#ff6700"/>
                <span style="margin-left: 10px">运费说明</span>
              </p>
              <div class="section-info">由小米发货商品(不含有品),单笔满69元免运费;<br>由小米有品发货的商品,免运费;<br>由第三方商家发货的商品，运费以实际结算金额为准;<br>特殊商品需要单独收取运费,具体以实际结算金额为准;优惠券等不能抵扣运费金额;如需无理由退货,用户将承担该商品的退货物流费用;<br>使用门店闪送服务，需单独支付10元运费。</div>
            </div>
          </div>

        </van-popup>
      </van-tab>
      <van-tab title="评价">
        <div style="background-color: #f2f2f2; height: 15px"></div>
        <van-cell value="好评率99%" is-link>
          <!-- 使用 title 插槽来自定义标题 -->
          <template #title>
            <span><b>用户评价</b></span>
          </template>
        </van-cell>
        <div style="margin: 10px">
          <div class="comments-tags">价格实惠</div>
          <div class="comments-tags">运行稳定</div>
          <div class="comments-tags">颜值极高</div>
          <div class="comments-tags">拍照一流</div>
          <div class="comments-tags">系统稳定</div>
          <div class="comments-tags">充电快速</div>
        </div>
      </van-tab>
      <van-tab title="详情">内容 3</van-tab>
      <van-tab title="推荐">内容 4</van-tab>
      <!-- 导航右侧,可以生成链接二维码 -->
      <template #nav-right>
        <van-button icon="qr" style="border: 0"/>
      </template>
    </van-tabs>

  </div>
</template>

<script>
export default {
  name: "detail",
  data() {
    return {
      active: 0,
      bannerArr: ["https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/19ea60fd861909d2223bdd8db67c6bd9.jpg",
        "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/4a6aa985522c47cf372bfd75f27e2edf.jpg",
        "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5246528a55604aa0252db414cc71b838.jpg",
        "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/eb13ec2c0703907da34c7a269bd0119d.jpg",
        "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2ccb2e436bc0e7d166cee3d7d96ab134.jpg"
      ],
      paramItemArr: [
        {
          url: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/f0c04e138bfed2b1ebb589de615236d1.png',
          name: 'CPU',
          value: '骁龙8 Gen 1'
        },
        {
          url: 'https://i8.mifile.cn/b2c-mimall-media/7692726e7a1dd34a3b1b4ede8aca020d.png',
          name: '三摄像头',
          value: '6400万像素+800万像素+200万像素'
        },
        {
          url: 'https://i8.mifile.cn/b2c-mimall-media/86a3bd46cf4f7f19daa2c3250cf30604.png',
          name: '超大屏',
          value: '6.67英寸'
        },
        {
          url: 'https://i8.mifile.cn/b2c-mimall-media/a5ab24dcb527e49f970f13b11e000ab1.png',
          name: '屏幕分辨率',
          value: '2400×1080'
        }, {
          url: 'https://i8.mifile.cn/b2c-mimall-media/c8ec0829241324e401744da627482560.png',
          name: '极速畅玩',
          value: '最高12GB'
        }, {
          url: 'https://i8.mifile.cn/b2c-mimall-media/8941adac25333e785b9cc78ca11f4f27.png',
          name: '存储容量',
          value: '最高256GB'
        }, {
          url: 'https://i8.mifile.cn/b2c-mimall-media/52ad10a73685342e437e44ea3d29cbff.png',
          name: '普通厚度',
          value: '8.5mm'
        }, {
          url: 'https://i8.mifile.cn/b2c-mimall-media/0b4ea0fb21dde2f29df3c20de73539b9.png',
          name: '超长待机',
          value: '4700mAh'
        }, {
          url: 'https://i8.mifile.cn/b2c-mimall-media/d1b67a407fb2a1ed42c2c0ce15af3318.png',
          name: '运营商网络',
          value: '5G全网通7.0'
        }, {
          url: 'https://i8.mifile.cn/b2c-mimall-media/bfd5ba9ae72c365dee42db14dfae4b0f.png',
          name: '网络模式',
          value: '双卡双待'
        },
      ],
      productPopupShow: false,
      addressPopupShow: false,
      sectionPopupShow: false,
      productChoose: {
        version: '1',
        color: '1',
        count: '1'
      },
      chosenAddressId: 1,
      addressList: [
        {
          id: '1',
          name: '张三',
          tel: '13000000000',
          address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室',
          isDefault: true,
        },
        {
          id: '2',
          name: '李四',
          tel: '1310000000',
          address: '浙江省杭州市拱墅区莫干山路 50 号',
        },
      ]
    };
  },
  methods: {
    onClickLeft() {
      this.$toast('返回')
    }, onClickRight() {
      this.$toast('按钮')
    },
    click(message) {
      this.$toast.success(message);
    },
    goback() {
      history.back()
    },

  }
}
</script>

<style scoped>
.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
}

p.price {
  margin: 8px 0 0 15px;
  text-align: left;
  color: #ff6700;
  font-size: 28px;
  font-weight: bold;
  line-height: 28px;
}

p.price span.start {
  font-size: 15px;
  line-height: 15px;
  vertical-align: top;
}

p.price span.old {
  color: #999;
  font-weight: lighter;
  text-decoration: line-through;
  font-size: 15px;
  line-height: 18px;
  vertical-align: bottom;
}

.coupon {
  margin: 10px;
  padding: 8px;
  border-radius: 10px;
  background-color: rgba(255, 105, 0, .1);
  text-align: left;
}

.coupon .message {
  color: #ff6900;
  font-size: 10px;
  line-height: 10px;
  border: 1px solid #ff6700;
  display: inline-block;
  padding: 2px;
  border-radius: 3px;
  margin-left: 5px;
}

.coupon button {
  float: right;
  margin-right: 5px;
  position: relative;
  bottom: 3px;
  border-radius: 3px;
  padding: 3px 8px 3px 8px;
}

.product-name {
  margin: 0 0 0 10px;
  color: #333;
  font-weight: bold;
  font-size: 20px;
  text-align: left;
}

.product-des {
  font-size: 10px;
  margin: 0 10px 0 10px;
  text-align: left;
}

.sale-point {
  margin: 10px 0 0 10px;
  font-size: 10px;
  text-align: left;
}

ol li {
  font-size: 12px;
  list-style-type: decimal;
  margin: 4px 0px 0px 20px;

}

.param-item {
  text-align: center;
  font-size: 10px;
}

.param-item div {
  text-align: center;
  padding: 0px;
  margin: 2px;
}

.product-desc {
  margin: 0;
  padding-top: 10px;
  text-align: left;
}

.product-desc .price {
  margin: 0;
  padding: 0;
  color: orangered;
  font-size: 22px;
  line-height: 22px;
  font-weight: bold;
}

.product-desc .price .old {
  color: #999999;
  font-size: 14px;
  text-decoration: line-through;
}

.product-desc .name {
  margin-top: 10px;
  font-size: 12px;
}

.custom-title {
  color: #666666;
  font-size: 12px;
  margin-right: 10px;
}

.section {
  margin-top: 10px;
}

.section-title {
  font-size: 14px;
  line-height: 18px;
  margin: 0;
}

.section-info {
  font-size: 12px;
  line-height: 18px;
  margin-left: 24px;
  color: #999999;
}
.comments-tags{
  display: inline-block;
  border-radius: 10px;
  height: 20px;
  line-height: 20px;
  font-size: 12px;
  color: #333333;
  padding:3px 10px 3px 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  background-color: #ffeeea;
}
</style>